<template>
  <div class="find">
    <div class="navbar">
      <van-nav-bar class="nav">
        <template #left>
          <van-icon name="arrow-left" @click="$router.back()" size="24" />
        </template>
        <template #right>
          <van-icon name="map-marked" size="25" @click="$router.push('')"  />
        </template>
      </van-nav-bar>
      <van-search class="search"
                  background="rgba(0, 0, 0, 0)"
                  v-model="value"
                  :label="label"
                  @click="$router.push('/citylist')"
                  placeholder="请输入小区或地址"
      >
      </van-search>
    </div>
    <!-- 切换 -->
    <van-tabs  title-active-color='#21b97a' color='transparent'>
      <van-tab title="区域"> <van-area title="标题" :area-list="areaList" />
      </van-tab>
      <van-tab title="方式">内容 2</van-tab>
      <van-tab title="租金">内容 3</van-tab>
      <van-tab title="筛选">内容 4</van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { cityArea } from '@/api/city'
import { houseList } from '@/api/house'
export default {
  name: 'FindHouse',
  data () {
    return {
      value: '',
      label: JSON.parse(localStorage.getItem('cityInfo')).label,
      areaList: {
        province_list: {
          qy: '区域',
          dd: '地铁'
        },
        city_list: {

        },
        county_list: {

        }
      }
    }
  },
  async created () {
    const res = await cityArea(JSON.parse(localStorage.getItem('cityInfo')).value)
    // 处理地铁和区域
    res.body.area.children.forEach((item, index) => { this.areaList.city_list[`qy${index}`] = item.label })
    res.body.subway.children.forEach((item, index) => { this.areaList.city_list[`dd${index}`] = item.label })
    // 处理地铁具体数据
    const sblist = {}
    for (const k in this.areaList.city_list) {
      // k是键名
      if (k.startsWith('d')) {
        sblist[k] = this.areaList.city_list[k]
      }
    }
    // console.log(sblist)
    // console.log(res.body.subway.children)

    res.body.subway.children.forEach((item1, i) => {
      // console.log(item1)
      for (const k in sblist) {
        if (sblist[k] === item1.label) {
          // console.log(k)
          // console.log(item1.label)
          if (item1.children === undefined) return
          // console.log(item1.children)
          item1.children.forEach((item2, index2) => { this.areaList.county_list[`${k}+${index2}`] = item2.label })
        }
      }
    })
    // console.log(this.areaList.county_list)

    // 处理区域具体数据
    const ddlist = {}
    for (const k in this.areaList.city_list) {
      // k是键名
      if (k.startsWith('q')) {
        ddlist[k] = this.areaList.city_list[k]
      }
    }
    // console.log(ddlist)
    // console.log(res.body.subway.children)

    res.body.area.children.forEach((item1, i) => {
      // console.log(item1)
      for (const k in ddlist) {
        if (ddlist[k] === item1.label) {
          // console.log(k)
          // console.log(item1.label)
          if (item1.children === undefined) return

          item1.children.forEach((item2, index2) => { this.areaList.county_list[`${k}+${index2}`] = item2.label })
        }
      }
    })
    const houseListRes = await houseList()
    console.log(houseListRes)
  }
}
</script>

<style lang='less' scoped>
  .search{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: 99;
    width: 80%;
}
.nav{
  height: 58px;
  position: relative;
}
/deep/ .van-icon-arrow-left{
top:3px,
}
/deep/ .van-icon-map-marked{
top:3px,
}
</style>
